﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
</head>

<body>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a, img {
            border: 0;
            text-decoration: none;
        }

        body {
            font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
        }
        /* slide */
        .slide {
            width: 715px;
            height: 300px;
            overflow: hidden;
            margin: 40px auto;
            border: solid 1px #ddd;
            padding: 10px;
        }

            .slide .info div {
                background: transparent url('images/20120822120959_zwMK3.png') no-repeat;
                _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/20120822120959_zwMK3.png',sizingMethod='crop');
                _background: none;
            }

            .slide .right div {
                background: transparent url('images/20120822120424_eK8mF.png') no-repeat;
                _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/20120822120424_eK8mF.png',sizingMethod='crop');
                _background: none;
            }

            .slide .left, .slide .right {
                position: relative;
            }

            .slide .left {
                float: left;
                z-index: 500;
            }

            .slide .swcont {
                position: absolute;
                top: 0;
                left: 0;
                width: 600px;
                height: 300px;
                display: none;
            }

            .slide .pstn {
                position: absolute;
            }

            .slide .info {
                top: 208px;
                left: 20px;
                padding: 12px 0 0 12px;
                width: 228px;
                height: 60px;
                color: #FFF;
                z-index: 500;
            }

                .slide .info div {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 240px;
                    height: 72px;
                    z-index: -1;
                }

                .slide .info a:link, .slide .info a:visited {
                    color: #FFF;
                    cursor: pointer;
                }

                .slide .info p {
                    line-height: 28px;
                }

                .slide .info img {
                    float: left;
                    padding-right: 12px;
                }

            .slide .right {
                float: right;
                margin-right: 4px;
                width: 110px;
                border-right: 1px solid #E5E5E5;
                z-index: 500;
            }

                .slide .right img {
                    float: right;
                    padding: 5px;
                    cursor: pointer;
                }

                .slide .right div {
                    position: absolute;
                    top: 0;
                    left: -10px;
                    width: 124px;
                    height: 64px;
                    z-index: -1;
                }
    </style>

    <div class="slide" id="indexSlide">

        <div class="left" id="indexLeft">

            <div class="swcont" style="display:block;">
                <a href="http://www.17sucai.com/"><img width="600" border="0" height="300" alt="" title="" src="images/20131029163613_urNBH.jpeg" /></a>
            </div>

            <div class="swcont">
                <a href="http://www.17sucai.com/"><img width="600" border="0" height="300" alt="" title="" src="images/0f000Q54-zW1Uysewfn3z6.jpg" /></a>
            </div>

            <div class="swcont">
                <a href="http://www.17sucai.com/"><img width="600" border="0" height="300" alt="" title="" src="images/20131029143936_JhwAt.jpeg" /></a>
                <div class="pstn info">
                    <div></div>
                    <a href="http://www.17sucai.com/" target="_blank">
                        <img src="images/20120212192105_jBMET.thumb.48_48_c.jpg" width="48" height="48" alt="Hello_MsMaggie" />
                        <h3>Hello_MsMaggie</h3>
                    </a>
                    <p>收集到 <a href="http://www.17sucai.com/" target="_blank">做成这样，还…</a> 专辑</p>
                </div>
            </div>

            <div class="swcont">
                <a href="http://www.17sucai.com/"><img width="600" border="0" height="300" alt="" title="" src="images/20131028164709_ChmEr.jpeg" /></a>
                <div class="pstn info">
                    <div></div>
                    <a href="http://www.17sucai.com/" target="_blank">
                        <img src="images/20120925090245_3XhMN.thumb.48_48_c.jpeg" width="48" height="48" alt="麻小木头__Dora" />
                        <h3>麻小木头__Dora</h3>
                    </a>
                    <p>收集到 <a href="http://www.17sucai.com/" target="_blank">我年轻、我就…</a> 专辑</p>
                </div>
            </div>

            <div class="swcont">
                <a href="http://www.17sucai.com/"><img width="600" border="0" height="300" alt="" title="" src="images/20131028155712_8QwHC.jpeg" /></a>
                <div class="pstn info">
                    <div></div>
                    <a href="http://www.17sucai.com/" target="_blank">
                        <img src="images/20130310220030_ZFzzd.thumb.48_48_c.jpeg" width="48" height="48" alt="Pisces茜x" />
                        <h3>Pisces茜x</h3>
                    </a>
                    <p>收集到 <a href="http://www.17sucai.com/" target="_blank">麻豆。花美男</a> 专辑</p>
                </div>
            </div>

        </div>

        <div class="right" id="indexRight">
            <a href="http://www.17sucai.com/"><img src="images/20131029163613_urNBH.thumb.100_50.jpeg " width="100" height="50" /></a>
            <a href="http://www.17sucai.com/"><img src="images/20131030111419_TXNHQ.jpeg" width="100" height="50" /></a>
            <a href="http://www.17sucai.com/"><img src="images/20131029143936_JhwAt.thumb.100_50.jpeg " width="100" height="50" /></a>
            <a href="http://www.17sucai.com/"><img src="images/20131028164709_ChmEr.thumb.100_50.jpeg " width="100" height="50" /></a>
            <a href="http://www.17sucai.com/"><img src="images/20131028155712_8QwHC.thumb.100_50.jpeg " width="100" height="50" /></a>
            <div id="hehe"></div>
        </div>

    </div>


    <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
        (function (b, c) {
            var a = function (d, e) {
                this.$element = c(d);
                this.option = c.extend({}, c.fn.slideShow.defaults, e);
                this.timmer;
                this.$container = c(this.option.container);
                this.$control = c(this.option.control);
                this.$follow = this.$control.children(this.option.follower);
                this.$child = this.$container.children();
                this.follow_height = this.$control.find(":first-child").outerHeight();
                this.cur = 0; this.length = this.$child.length;
                this._init(); this._events()
            };
            a.prototype._init = function () {
                var d = this;
                d.$container.children().each(function (f, e) {
                    var g = c(this);
                    if (f === 0) {
                        g.css({ opacity: 1 })
                    } else {
                        g.css({ display: "block", opacity: 0 })
                    }
                });
                d.$control.children(d.option.trigger).each(function (f, e) {
                    var g = c(this);
                    g.data("slideindex", f)
                });
                d._start()
            };
            a.prototype.next = function () {
                var d = this, e;
                e = d.cur + 1 < d.length ? d.cur + 1 : 0; d.slideto(e)
            };
            a.prototype.prev = function () {
                var d = this, e;
                e = d.cur - 1 < 0 ? d.length - 1 : d.cur - 1; d.slideto(e)
            };
            a.prototype.slideto = function (e) {
                var f = this, g = f.cur, h = f.$child.eq(f.cur), d = f.$child.eq(e);
                if (g === e) {
                    return
                } if (f.anim) {
                    f.anim.stop(false, true)
                } d.css({ zIndex: 4, opacity: 1 });
                h.css({ zIndex: 5 });
                f.anim = h.animate({ opacity: 0 }, "fast", function () {
                    h.css({ zIndex: 1 })
                });
                !!f.$follow && f.$follow.stop(true).animate({
                    top: f.follow_height * e
                }, "fast", function () {
                    f.$follow.css({
                        top: f.follow_height * e
                    })
                });
                f.cur = e
            };
            a.prototype._stop = function () {
                var d = this;
                clearTimeout(d.timmer)
            };
            a.prototype._start = function () {
                var d = this;
                d.timmer = setTimeout(function () {
                    d.next();
                    d._start()
                }, d.option.timeout)
            };
            a.prototype._events = function () {
                var e = this, d;
                e.$element.bind("mouseenter mouseleave", function (f) {
                    if (f.type === "mouseenter") {
                        e._stop()
                    } else {
                        if (f.type === "mouseleave") {
                            e._start()
                        }
                    }
                });
                c(e.option.control).delegate(e.option.trigger, "mouseenter", function (f) {
                    var g = c(this);
                    clearTimeout(d);
                    d = setTimeout(function () {
                        e.slideto(g.data("slideindex"))
                    }, 100)
                })
            }; c
			.fn.slideShow = function (d) {
			    return this.each(function () {
			        var g = c(this), f = g.data("slideShow-obj"), e = typeof d === "object" && d;
			        if (!f) {
			            g.data("slideShow-obj", (f = new a(this, e)))
			        }
			    })
			};
            c.fn.slideShow.Constructor = a; c.fn.slideShow.defaults = {
                timeout: 4000,
                container: "#indexLeft",
                control: "#indexRight",
                trigger: "a",
                follower: "#hehe"
            }
        })(window, jQuery);
    </script>

    <script type="text/javascript">
        $(document).ready(function () {

            $("#indexSlide").slideShow({ container: "#indexLeft", control: "#indexRight", trigger: "a", follower: "#hehe" });

        });
    </script>

</body>
</html>
